<template>
<!--  <div class="menu-management">-->
<!--    <el-button v-permission="'system:menu:add'" type="primary" @click="showAddDialog">新增</el-button>-->
<!--    <el-table-->
<!--        :data="menuList"-->
<!--        row-key="id"-->
<!--        :tree-props="{ children: 'childrenMenus', hasChildren: 'hasChildren' }"-->
<!--        border-->
<!--        style="margin-top: 20px;"-->
<!--    >-->
<!--      <el-table-column prop="menuName" label="菜单名称" />-->
<!--      <el-table-column prop="path" label="路由地址" />-->
<!--      <el-table-column prop="menuType" label="类型">-->
<!--        <template #default="{ row }">-->
<!--          {{ row.menuType === 'M' ? '目录' : row.menuType === 'C' ? '菜单' : '按钮' }}-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="perms" label="权限标识" />-->
<!--      <el-table-column prop="orderNum" label="排序" />-->
<!--      <el-table-column label="操作" width="200">-->
<!--        <template #default="{ row }">-->
<!--          <el-button v-permission="'system:menu:edit'" type="text" @click="showEditDialog(row)">编辑</el-button>-->
<!--          <el-button v-permission="'system:menu:delete'" type="text" @click="deleteMenu(row.id)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    &lt;!&ndash; 新增/编辑对话框 &ndash;&gt;-->
<!--    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%">-->
<!--      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">-->
<!--        <el-form-item label="上级菜单" prop="parentId">-->
<!--          <el-tree-select-->
<!--              v-model="form.parentId"-->
<!--              :data="menuList"-->
<!--              :props="{ label: 'menuName', children: 'childrenMenus', value: 'id' }"-->
<!--              check-strictly-->
<!--              :render-after-expand="false"-->
<!--              placeholder="请选择上级菜单"-->
<!--              style="width: 100%"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="菜单名称" prop="menuName">-->
<!--          <el-input v-model="form.menuName" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="路由地址" prop="path">-->
<!--          <el-input v-model="form.path" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="组件路径" prop="component">-->
<!--          <el-input v-model="form.component" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="权限标识" prop="perms">-->
<!--          <el-input v-model="form.perms" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="菜单类型" prop="menuType">-->
<!--          <el-radio-group v-model="form.menuType">-->
<!--            <el-radio label="M">目录</el-radio>-->
<!--            <el-radio label="C">菜单</el-radio>-->
<!--            <el-radio label="F">按钮</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="排序" prop="orderNum">-->
<!--          <el-input-number v-model="form.orderNum" :min="0" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否外链" prop="isFrame">-->
<!--          <el-radio-group v-model="form.isFrame">-->
<!--            <el-radio :label="0">是</el-radio>-->
<!--            <el-radio :label="1">否</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="显示状态" prop="visible">-->
<!--          <el-radio-group v-model="form.visible">-->
<!--            <el-radio label="0">显示</el-radio>-->
<!--            <el-radio label="1">隐藏</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="菜单状态" prop="status">-->
<!--          <el-radio-group v-model="form.status">-->
<!--            <el-radio label="0">正常</el-radio>-->
<!--            <el-radio label="1">停用</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="图标" prop="icon">-->
<!--          <el-input v-model="form.icon" />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="submitForm">确定</el-button>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--  </div>-->
  菜单
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const menuList = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('');
const form = ref({
  id: null,
  parentId: 0,
  menuName: '',
  path: '',
  component: '',
  perms: '',
  menuType: 'C',
  orderNum: 0,
  isFrame: 1,
  visible: '0',
  status: '0',
  icon: ''
});
const formRef = ref(null);
const rules = {
  menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  menuType: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
  orderNum: [{ required: true, message: '请输入排序', trigger: 'blur' }]
};

const fetchMenus = async () => {
  const res = await axios.get('/api/system/menu/tree', {
    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
  });
  menuList.value = res.data;
};

const showAddDialog = () => {
  form.value = {
    id: null,
    parentId: 0,
    menuName: '',
    path: '',
    component: '',
    perms: '',
    menuType: 'C',
    orderNum: 0,
    isFrame: 1,
    visible: '0',
    status: '0',
    icon: ''
  };
  dialogTitle.value = '新增菜单';
  dialogVisible.value = true;
};

const showEditDialog = async (row) => {
  const res = await axios.get(`/api/system/menu/${row.id}`, {
    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
  });
  form.value = { ...res.data, parentId: res.data.parentId || 0 };
  dialogTitle.value = '编辑菜单';
  dialogVisible.value = true;
};

const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const data = { ...form.value };
      if (data.id) {
        await axios.put('/api/system/menu', data, {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        });
        ElMessage.success('更新成功');
      } else {
        await axios.post('/api/system/menu', data, {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        });
        ElMessage.success('添加成功');
      }
      dialogVisible.value = false;
      fetchMenus();
    }
  });
};

const deleteMenu = async (id) => {
  try {
    await axios.delete(`/api/system/menu/${id}`, {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    });
    ElMessage.success('删除成功');
    fetchMenus();
  } catch (error) {
    ElMessage.error(error.response?.data?.message || '删除失败');
  }
};

onMounted(() => {
  fetchMenus();
});
</script>

<style scoped>
.menu-management {
  padding: 20px;
}
</style>